
<template>
  <section>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.ruleId" placeholder="规则编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.collected" clearable placeholder="是否采集" @change="list">
            <el-option label="未采集" value="0"></el-option>
            <el-option label="已采集" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="list">查询</el-button>
        </el-form-item>
        <!--
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        -->
      </el-form>
    </el-col>

    <el-table
      :data="results"
      highlight-current-row
      stripe
      v-loading="listLoading"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="ruleId" label="规则编号" width="80"></el-table-column>
      <!-- <el-table-column prop="md5" label="MD5"></el-table-column> -->
      <el-table-column prop="url" label="Url">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank">{{scope.row.url}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="parentUrl" label="上级页面Url">
        <template slot-scope="scope">
          <a :href="scope.row.parentUrl" target="_blank">{{scope.row.parentUrl}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="collected" label="是否采集" width="80">
        <template slot-scope="scope">{{scope.row.collected ? '是' : '否'}}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"  width="160">
        <template slot-scope="scope">{{scope.row.createTime | formatDate}}</template>
      </el-table-column>
      <!--
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      -->
    </el-table>

    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100, 300]"
        @current-change="handlePageChange"
        @size-change="handleLimitChange"
        :current-page="page.page"
        :page-size="page.limit"
        :total="page.total"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" ref="addForm">
        <el-form-item label="ruleId">
          <el-input v-model="addForm.ruleId"></el-input>
        </el-form-item>

        <el-form-item label="md5">
          <el-input v-model="addForm.md5"></el-input>
        </el-form-item>

        <el-form-item label="url">
          <el-input v-model="addForm.url"></el-input>
        </el-form-item>

        <el-form-item label="parentUrl">
          <el-input v-model="addForm.parentUrl"></el-input>
        </el-form-item>

        <el-form-item label="collected">
          <el-input v-model="addForm.collected"></el-input>
        </el-form-item>

        <el-form-item label="createTime">
          <el-input v-model="addForm.createTime"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" ref="editForm">
        <el-input v-model="editForm.id" type="hidden"></el-input>

        <el-form-item label="ruleId">
          <el-input v-model="editForm.ruleId"></el-input>
        </el-form-item>

        <el-form-item label="md5">
          <el-input v-model="editForm.md5"></el-input>
        </el-form-item>

        <el-form-item label="url">
          <el-input v-model="editForm.url"></el-input>
        </el-form-item>

        <el-form-item label="parentUrl">
          <el-input v-model="editForm.parentUrl"></el-input>
        </el-form-item>

        <el-form-item label="collected">
          <el-input v-model="editForm.collected"></el-input>
        </el-form-item>

        <el-form-item label="createTime">
          <el-input v-model="editForm.createTime"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import HttpClient from "../../apis/HttpClient";

export default {
  name: "List",
  data() {
    return {
      results: [],
      listLoading: false,
      page: {},
      filters: {},
      selectedRows: [],

      addForm: {
        ruleId: "",

        md5: "",

        url: "",

        parentUrl: "",

        collected: "",

        createTime: ""
      },
      addFormVisible: false,
      addLoading: false,

      editForm: {
        id: "",

        ruleId: "",

        md5: "",

        url: "",

        parentUrl: "",

        collected: "",

        createTime: ""
      },
      editFormVisible: false,
      editLoading: false
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    list() {
      let me = this;
      me.listLoading = true;
      let params = Object.assign(me.filters, {
        page: me.page.page,
        limit: me.page.limit
      });
      HttpClient.post("/api/admin/collect-link/list", params)
        .then(data => {
          me.results = data.results;
          me.page = data.page;
        })
        .finally(() => {
          me.listLoading = false;
        });
    },
    handlePageChange(val) {
      this.page.page = val;
      this.list();
    },
    handleLimitChange(val) {
      this.page.limit = val;
      this.list();
    },
    handleAdd() {
      this.addForm = {
        name: "",
        description: ""
      };
      this.addFormVisible = true;
    },
    addSubmit() {
      let me = this;
      HttpClient.post("/api/admin/collect-link/create", this.addForm)
        .then(data => {
          me.$message({ message: "提交成功", type: "success" });
          me.addFormVisible = false;
          me.list();
        })
        .catch(rsp => {
          me.$notify.error({ title: "错误", message: rsp.message });
        });
    },
    handleEdit(index, row) {
      let me = this;
      HttpClient.get("/api/admin/collect-link/" + row.id)
        .then(data => {
          me.editForm = Object.assign({}, data);
          me.editFormVisible = true;
        })
        .catch(rsp => {
          me.$notify.error({ title: "错误", message: rsp.message });
        });
    },
    editSubmit() {
      let me = this;
      HttpClient.post("/api/admin/collect-link/update", me.editForm)
        .then(data => {
          me.list();
          me.editFormVisible = false;
        })
        .catch(rsp => {
          me.$notify.error({ title: "错误", message: rsp.message });
        });
    },

    handleSelectionChange(val) {
      this.selectedRows = val;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>

